<script lang="ts">
export default {
  name: "OperateMethodProfile"
}
</script>

<template>
  <el-descriptions
      ref="dataFormRef"
      :column="2"
      :model="dataState.formData"
      border
  >

    <el-descriptions-item label="设备厂商"> {{ dataState.formData.manufacturer }}</el-descriptions-item>

    <el-descriptions-item label="设备型号"> {{ dataState.formData.deviceType }}</el-descriptions-item>

    <el-descriptions-item label="操作名称"> {{ dataState.formData.operateName }}</el-descriptions-item>

    <el-descriptions-item label="操作模式"> {{
        getSelectLabel("operateMode", dataState.formData.operateMode)
      }}
    </el-descriptions-item>

    <el-descriptions-item label="通信超时"> {{ dataState.formData.timeout }}</el-descriptions-item>

    <el-descriptions-item label="数据类型"> {{ getSelectLabel("dataType", dataState.formData.dataType) }}
    </el-descriptions-item>

    <el-descriptions-item label="创建时间"> {{ formatDate(dataState.formData.createTime) }}
    </el-descriptions-item>

    <el-descriptions-item label="更新时间"> {{ formatDate(dataState.formData.updateTime) }}
    </el-descriptions-item>


  </el-descriptions>
</template>

<script lang="ts" setup>

import {onMounted, reactive, ref} from "vue";

import {ElForm} from "element-plus";


import {formatDate,} from '@/utils/formatter';
import {RepoCompOperateEntity} from "@/api/cloud/repository/repocomp/script/version/types";
import {getSelectLabel} from "@/api/cloud/repository/repocomp/script/version/option";

const dataFormRef = ref(ElForm); // 属性名必须和元素的ref属性值一致

/**
 * 对外声明接口：父页面可以调用它
 */
defineExpose({initData});

// 数据状态：定义
let dataState = reactive({
  // 类型：create/update
  type: 'create',
  // 标题
  title: '详细信息',
  // 表单数据
  formData: {} as RepoCompOperateEntity,

  operateId: 0,
});

function initData(entity: RepoCompOperateEntity) {
  dataState.formData = entity;
}

onMounted(() => {
});

</script>
